<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>幻灯片轮播图效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.carousel {
				width: 640px;
				height: 400px;
				border: 1px solid black;
				position: relative;
				margin: 50px auto;
			}
			ul {
				list-style: none;
				width: 3000px;
				position: relative;
				left: 0;
			}
			.carousel ul li {
				float: left;
			}
			.carousel .left {
				position: absolute;
				left: 20px;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: gray;
			}
			.carousel .right {
				position: absolute;
				right: 20px;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: gray
			}
		</style>
	</head>
	<body>
		<div class="carousel">
			<ul>
				<li><img src="img/0.png" alt="化妆水"></li>
				<li><img src="img/1.jpg" alt="纸尿裤"></li> 
				<li><img src="img/2.jpg" alt="MUJI住宿"></li> 
				<li><img src="img/3.jpg" alt="MUJI周刊"></li> 
			</ul>
			<a class="left" id="left" href="#"></a>
			<a class="right" id="right" href="#"></a>
		</div>
	</body>
	<script type="text/javascript">
		var left = document.getElementById("left");
		var right = document.getElementById("right")
		var list = document.getElementById("list")
		
		left.onclick = function() {
			
		}
		right.onclick = function() {
			
		}
	</script>
</html>
